<template>
    <div class="nav-bar-item" @click="itemClick">
        <!-- 未点击的时候现实的图标 -->
        <slot name="item-icon" v-if="!isActive"></slot>
        <!-- 点击的时候现实的图标 -->
        <slot name="item-icon-active" v-else></slot>
        <div :style="isShow">
          <slot name="item-text"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name:"NavBarItem",
    methods:{
      itemClick(){
        // console.log("你看我点击了没");
        //console.log(this.$route.path === this.link);
        // console.log(this.link);
        this.$router.replace(this.link).catch( err => {
          // console.log(err);
        });
      }
    },
    computed:{
      isActive(){
        return this.$route.path === this.link;
      },
      isShow(){
        // 三元运算符
        return this.isActive ? {color: this.activeTextColor} : {};
      }
    },
    props:{//父子组件传值
      link:{//父组件传过来的值
        type:String,//传过来的值的类型
        required:true//必须传入一个路径给我
      },
      activeTextColor:{
        type:String,
        default:"rgb(229, 76, 102)"
      }
    }
}
</script>

<style scoped>
.nav-bar-item{
  flex: 1;
}

.nav-bar-item img{
  width: 24px;
  height: 24px;
  margin-top: 3px;
}

.isActive{
  color: rgb(229, 76, 102);
}
</style>